<template>
  <div id="app">
    <!-- 信封开屏动画 -->
    <EnvelopeAnimation 
      :showEnvelope="showEnvelope" 
      @envelope-opened="onEnvelopeOpened" 
    />
    
    <!-- 重置按钮 -->
    <ResetButton 
      v-if="!showEnvelope" 
      @reset-envelope="onResetEnvelope" 
    />
    
    <!-- 音效控制 -->
    <AudioControl v-if="!showEnvelope" />
    
    <!-- 主应用内容 -->
    <router-view v-if="!showEnvelope" />
  </div>
</template>

<script>
import { ref } from 'vue'
import EnvelopeAnimation from './components/EnvelopeAnimation.vue'
import ResetButton from './components/ResetButton.vue'
import AudioControl from './components/AudioControl.vue'

export default {
  name: 'App',
  components: {
    EnvelopeAnimation,
    ResetButton,
    AudioControl
  },
  setup() {
    const showEnvelope = ref(true)
    
    const onEnvelopeOpened = () => {
      showEnvelope.value = false
    }
    
    const onResetEnvelope = () => {
      showEnvelope.value = true
    }
    
    // 始终以信封开场，不再基于首次访问隐藏
    
    return {
      showEnvelope,
      onEnvelopeOpened,
      onResetEnvelope
    }
  }
}
</script>
